<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">用户账号</label>
                  <div class="layui-input-inline">
                    <input type="text" name="userName" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">用户昵称</label>
                  <div class="layui-input-inline">
                    <input type="text" name="nickName" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button
                    type="submit"
                    class="layui-btn layui-btn-primary"
                    lay-submit
                    lay-filter="data-search-btn"
                  >
                    <i class="layui-icon"></i> 搜 索
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">
              删除
            </button>
          </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
          <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="resetPwd">重置密码</a>
          <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
      </div>
    </div>
    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:inline="none">
      layui.use(["form", "table"], function () {
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

        table.render({
          elem: "#currentTableId",
          url: "/sys-user/query",
          toolbar: "#toolbarDemo",
          defaultToolbar: [
            "filter",
            "exports",
            "print",
            {
              title: "提示",
              layEvent: "LAYTABLE_TIPS",
              icon: "layui-icon-tips",
            },
          ],
          method: "post",
          contentType: "application/json",
          where: { id: "12344" },
          parseData: function (res) {
            // res 即为原始返回的数据
            console.log(res);
            return {
              code: res.code, // 解析接口状态
              msg: res.msg, // 解析提示文本
              count: res.data.totalCount, // 解析数据长度
              data: res.data.list, // 解析数据列表
            };
          },
          cols: [
            [
              // {type: "checkbox", width: 50},
              { field: "userId", width: 80, title: "ID", sort: true },
              { field: "userName", width: 120, title: "用户账号" },
              { field: "nickName", width: 120, title: "用户昵称", sort: true },
              {
                field: "sex",
                width: 120,
                align: "center",
                templet: function (d) {
                  if (d.sex == 0) {
                    return "男";
                  }
                  if (d.sex == 1) {
                    return "女";
                  } else {
                    return "未知";
                  }
                },
                title: "性别",
              },
              { field: "email", width: 120, title: "邮箱" },
              { field: "phonenumber", title: "手机号码", width: 200 },
              {
                field: "status",
                width: 120,
                align: "center",
                templet: function (d) {
                  if (d.status == 0) {
                    return "正常";
                  }
                  if (d.status == 1) {
                    return "停用";
                  } else {
                    return "未知";
                  }
                },
                title: "账号状态",
              },
              {
                title: "操作",
                minWidth: 200,
                toolbar: "#currentTableBar",
                align: "center",
              },
            ],
          ],
          limits: [10, 15, 20, 25, 50, 100],
          limit: 15,
          page: true,
          request: {
            pageName: "pageNo", // 页码的参数名称，默认：page
            limitName: "pageSize", // 每页数据条数的参数名，默认：limit
          },
          skin: "line",
        });

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              page: {
                curr: 1,
              },
              where: data.field,
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {
          if (obj.event === "add") {
            // 监听添加操作
            var index = layer.open({
              title: "添加用户",
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ["100%", "100%"],
              content: "../page/table/add.html",
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
          } else if (obj.event === "delete") {
            // 监听删除操作
            var checkStatus = table.checkStatus("currentTableId"),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          }
        });

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          console.log(obj);
        });

        table.on("tool(currentTableFilter)", function (obj) {
          var data = obj.data;
          var userId = data.userId;
          if (obj.event === "edit") {
            var index = layer.open({
              title: "编辑用户",
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ["100%", "100%"],
              content: "../page/table/edit.html",
            });
            $(window).on("resize", function () {
              layer.full(index);
            });
            return false;
          } else if (obj.event === "delete") {
            layer.confirm("真的删除行么", function (index) {
              obj.del();

              layer.close(index);
            });
          } else if (obj.event === "resetPwd") {
            console.log(obj);
            // 监听删除操作
            var resetPwdIndex = layer.open({
              type: 1,
              area: "350px",
              resize: false,
              shadeClose: true,
              title: "demo : layer + form",
              content: `
                  <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                    <div class="demo-login-container">
                      <div class="layui-form-item">
                        <div class="layui-input-wrap">
                          <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                          </div>
                          <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                      </div>
                      <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">确定</button>
                      </div>
                    </div>
                  </div>
        `,
              success: function () {
                // 对弹层中的表单进行初始化渲染
                form.render();
                // 表单提交事件
                form.on("submit(demo-login)", function (data) {
                  var field = data.field; // 获取表单字段值
                  // 此处可执行 Ajax 等操作
                  console.log({ userId: userId, ...data.field });
                  layer.confirm("确认修改密码？", function (index) {
                    $.ajax({
                      url: "/sys-user/restPwd",
                      type: "post",
                      async: false,
                      data: JSON.stringify({ userId: userId, ...data.field }),
                      contentType: "application/json",
                      success: function (result) {
                        if (result.success) {
                          layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                            layer.close(resetPwdIndex);
                          });
                        } else {
                          layer.msg(result.msg, { icon: 2, time: 1000 });
                        }
                      },
                    });
                  });

                  return false; // 阻止默认 form 跳转
                });
              },
            });
          }
        });
      });
    </script>
  </body>
</html>
